<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2 class="title">欢迎登录</h2>
      <el-form
          :model="loginForm"
          :rules="rules"
          ref="formRef"
          label-width="80px"
      >
        <el-form-item prop="userid" label="用户名">
          <el-input
              placeholder="请输入用户名"
              v-model="loginForm.userid"/>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input
              type="password"
              placeholder="请输入密码"
              v-model="loginForm.password"/>
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              @click="submitForm"
              class="submit-btn"
              style="width: 100%">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import {ElMessage, ElForm } from 'element-plus'
import axios from "axios";
const formRef = ref( null)
import router from "@/router/router";
const loginForm = reactive({
  userid: 'admin',
  password: '123456'
})

const rules = {
    userid:[
      {required:true,message:'请输入用户名',trigger:'blur'},
  {min:3,max:20,message:'长度在3到20个字符',trigger:'blur'}
  ],
  password:[
    {required: true,message:'请输入密码',trigger:'blur'},
    {min:6,max:20,message:'长度在6到20个字符',trigger:'blur'}
      ]}

const submitForm = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.validate()
    axios.post("http://localhost:8088/users/login", loginForm).then(res=>{

      if(res.data.code==200){
        ElMessage.success('登录成功')
        router.push({name: 'SystemHome'})
      } else {
        ElMessage.error('用户名或密码错误')
      }
    })
  } catch (error) {
    ElMessage.error('请检查输入并重试')
  }
}
</script>

<style scoped>
.login-container {
  background-image: url("@/assets/background.png");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.login-card {
  width: 400px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  margin-bottom: 24px;
  color: #409EFF;
}

.submit-btn {
  margin-top: 12px;
}

/* 调整表单项间距 */
.el-form-item {
  margin-bottom: 22px;
}
</style>
